import { Tooltip } from 'antd';
import React from 'react';

interface OmissionType {
  content: string;
  isPointer?: boolean;
  color?: string;
  end?: number;
  onClick?: () => void;
}

const Omission: React.FC<OmissionType> = (props) => {
  const { content, color = '', isPointer = false, end = 6, onClick } = props;
  const currentContent = content || '';
  const nextSlicStr = currentContent.substring(
    currentContent.length - end,
    currentContent.length,
  );
  const prevSlicStr = currentContent.substring(0, currentContent.length - end);
  return (
    <Tooltip title={currentContent}>
      <span
        style={{
          display: 'flex',
          color,
          cursor: isPointer ? 'pointer' : 'default',
        }}
        onClick={onClick}
      >
        <span
          style={{
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}
        >
          {prevSlicStr}
        </span>
        <span
          style={{
            whiteSpace: 'nowrap',
          }}
        >
          {nextSlicStr}
        </span>
      </span>
    </Tooltip>
  );
};

export default Omission;
